import Lists from '@/component/List'
import { Tabs, Image } from 'antd-mobile'
import { StarOutline } from 'antd-mobile-icons'
import { useState } from 'react'
import style from './index.module.scss'
import { homeListItemType } from '@/type/home'
import { useNavigate } from 'react-router-dom'
import { saveID } from '@/reduxToolkit/reducers/productID'
import { useDispatch } from 'react-redux'

const Tab = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const [title] = useState(['畅销', '新书', '精选'])  
  const [typeList] = useState(['sales', 'new', 'recommend'])  
  const [activeType, setActiveType] = useState('sales') // 当选选项卡下标

  // 跳转详情页
  const goDetail = (id: number) => {
    navigate('/detail')
    dispatch(saveID(id))
  }

  const getContent = () => {
    return title.map((item, index) => {
      return (
        <Tabs.Tab title={item} key={typeList[index]}>
          <Lists page='home' type={activeType} getlist={(goodlist: []) => {
            return goodlist.map((item: homeListItemType, index: number) => {
              return (
                <div className={style.item} key={index} onClick={() => goDetail(item.id)}>
                  <Image src={item.cover_url}/>
                  <p className={style.title}>{item.title}</p>
                  <p className={style.description}>
                    <span className={style.price}>￥{item.price}</span> 
                    <StarOutline className={style.like}/>
                    <span>{item.collects_count}</span>
                  </p>
                </div>
              )
            })
          }}/>
        </Tabs.Tab>
      )
    })
  }
  return(
    <div className={style.tabBox}>
      <Tabs style={{ '--title-font-size': '15px' }} onChange={(key: string) => setActiveType(key)}>
        {getContent()}
      </Tabs>
    </div>
  )
}

export default Tab